<style lang="scss">
	page {
		overflow: hidden;
		background: linear-gradient(to bottom, #fedecd, #FF9F8A);
	}

	.content {
		height: 100vh;
		width: 100%;
		// background-color: #FFD3C9;

		.box_time {
			width: 100%;
			height: 400rpx;
			display: flex;
			justify-content: center;
			position: relative;
			top: 20%;

			.timeShow {
				height: 100%;
				width: 400rpx;
				background-color: #FF9F8A;
				border-radius: 400rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: rgba(77, 76, 78, 0.2) 0px 25px 50px -20px;

				.timeShow_time {
					font-size: 80rpx;
					color: white;
				}
			}
		}

		.timeButton {
			position: relative;
			display: flex;
			justify-content: center;
			top: 40%;
			width: 100%;
			height: 80rpx;

			.timeButton_bu {
				width: 50%;
				height: 100%;
				background-color: #FF9F8A;
				border-radius: 30rpx;
				color: white;
				text-align: center;
				// box-shadow: rgba(77, 76, 78, 0.2) 0px 25px 50px -20px;
				box-shadow:
					2.8px 4.5px 3.2px rgba(0, 0, 0, 0.02),
					6.7px 10.6px 7.5px rgba(0, 0, 0, 0.028),
					12.5px 20px 14px rgba(0, 0, 0, 0.035),
					22.3px 35.7px 25px rgba(0, 0, 0, 0.042),
					41.8px 66.8px 46.8px rgba(0, 0, 0, 0.05),
					100px 160px 112px rgba(0, 0, 0, 0.07);
			}
		}
	}
</style>
<template>
	<view class="content">
		<view class="box_time">
			<view class="timeShow">
				<view class="timeShow_time">{{ textShowM +':'+ textShowT }}</view>
			</view>
		</view>
		<view class="timeButton">
			<button class="timeButton_bu" @click="start()" v-if="buShow">开始{{ handoffShow }}</button>
			<button class="timeButton_bu" @click="stop()" v-if="!buShow">停止{{ handoffShow }}</button>
		</view>
		<NavigationBar color="#fedecd" page="1" class="notStyle"></NavigationBar>
	</view>
</template>

<script>
	import NavigationBar from '../components/NavigationBar/NavigationBar.vue';
	import chronograph from '../../util/chronograph.js';

	export default {
		data() {
			return {
				page: '',
				textShowM: '',
				textShowT: '',
				buShow: true,
				tuoluoyi: '',
				handoffShow: '专注'
			};
		},
		onShow: () => {
			uni.setScreenBrightness({
				value: 0.4,
			});
		},
		methods: {
			start() {
				uni.vibrateShort();
				this.buShow = false;
				uni.setStorageSync('buShow', false);
				chronograph.chronographRuning();
			},
			stop() {
				uni.stopGyroscope();
				uni.vibrateShort();
				uni.setStorageSync('buShow', true);
				this.buShow = true;
				uni.showModal({
					title: '提示',
					content: '是否放弃本次专注/休息,取消则暂停',
					success: function(res) {
						if (res.confirm) {
							chronograph.stop();
						} else if (res.cancel) {
							chronograph.paused();
							uni.showToast({
								title: '暂停成功',
								duration: 2000,
								icon: 'none'
							});
						}
					}
				});
			}
		},
		components: {
			NavigationBar
		},
		created() {
			this.buShow = uni.getStorageSync('buShow');
			chronograph.secondsToMinutes()
			setInterval(() => {
				this.handoffShow = chronograph.handoff ? '专注' : '休息';
				this.textShowM = chronograph.minutes;
				this.textShowT = chronograph.remainingSeconds
				if (chronograph.timeTemp === -1) {
					uni.setStorageSync('buShow', true);
					this.buShow = true
				}
			}, 100);
		}
	}
</script>